<template>
    <div class="wrap">
      <head-title :title="headText" @callback="onClickLeft"></head-title>
        <div class="i-home">
            <div class="tps">
                <div class="shopheade">
                    <div class="type-choose-wrap">
                        <div class="header-wrap">
                            <div class="header-wrap-inner">
                                <div class="types-header" ref="header">
                                    <div class="type-item" :class="{'selected':currentType == -1}" @click="selectType(-1)">全部</div>
                                    <div class="type-item" :class="{'selected':currentType == index}" v-for="(item,index) in categoryList" :key="index" @click="selectType(index,item.cate_id)">{{item.cate_title}}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div>
                <div class="shoplist shopall">
                  <ul>
                    <li v-for="(item,index) in listAll" :key="index">
                      <router-link :to="{path:'mallDetails',query:{spec_id:item.spec_id}}">
                      <span><img :src="item.cover_img"></span>
                      <div class="prter">
                        <p style="margin-bottom: .6rem;">{{item.product_name}}</p>
                        <!--<p><i style="width: 2.5rem;height: .4rem;margin-top: 0.1rem;color: #ccc;font-style: normal;">{{item.sub_name}}</i></p>-->
                        <p>库存：{{item.shop_spec_stock_total}}</p>
                        <label><i>￥{{item.unit_money}}</i></label>
                      </div>
                      <b class="xj" v-if="item.is_show == 0"><img src="./../../assets/img/xj.png"></b>
                      </router-link>
                    </li>

                    <!--<li v-for="(item,index) in listAll" :key="index">-->
                      <!--<router-link :to="{path:'mallDetails',query:{spec_id:item.spec_id}}">-->
                      <!--<div class="checkbox_ic" v-if="item.is_show == 1">-->
                        <!--<a href="javascript:void 0" class="item-check-btn" :class="{'check':item.checked}" @click="selectedProuct(item)"></a>-->
                      <!--</div>-->
                      <!--<span v-if="item.is_show == 1"><router-link :to="{path:'mallDetails',query:{p_id:item.id}}"><img :src="item.cover_img"></router-link></span>-->
                      <!--<span v-if="item.is_show == 0"><img :src="item.cover_img"></span>-->
                      <!--<div class="prter">-->
                        <!--<p>{{item.product_name}}</p>-->
                        <!--<p>库存：{{item.spec_stock}}</p>-->
                        <!--<label><i class="left">￥{{item.unit_money}}</i>-->
                        <!--</label>-->
                      <!--</div>-->
                      <!--</router-link>-->
                    <!--</li>-->

                  </ul>

                    <!--<ul>-->
                        <!--<router-link :to="{path:'mallDetails',query:{p_id:item.product_id}}" v-for="(item,index) in listAll" :key="index" tag="li">-->
                            <!--<span><img :src="item.cover_img" alt=""></span>-->
                            <!--<p>{{item.product_name}}<br><label><i class=" left">￥{{item.unit_point}}</i></label></p>-->
                        <!--</router-link>-->
                    <!--</ul>-->
                    <p v-if="page != pageNum && listAll.length != 0" @click="onLoad()">加载更多</p>
                    <p v-if="page == pageNum || listAll.length == 0">没有更多数据</p>
                </div>
            </div>
        </div>
        <tabbar :num ="num"></tabbar>
    </div>
</template>
<script>
  import HeadTitle from "./../../components/title.vue";
	import ScrollUtils from './../../assets/js/ScrollUtils';
    import tabbar from "./../../components/tabbar.vue";
    import { Search, Swipe, SwipeItem, Tag } from 'vant';
    export default {
        data(){
            return {
                headText: '全部分类',  //顶部标题
                value:'',
                categoryList:{},
                currentType: -1,  //下标
                shop_gallery_img: [
                  {url: 'http://vmallapi.local/upload/20180520/b3bd6f1b73e13da1f34a44bf288952d5.jpg'},
                  {url: 'http://vmallapi.local/upload/20180520/b3bd6f1b73e13da1f34a44bf288952d5.jpg'},
                  {url: 'http://vmallapi.local/upload/20180520/b3bd6f1b73e13da1f34a44bf288952d5.jpg'}

                ],
                listAll:[],
                        pageSize:'',  //有多少条数据
                        pageNum:'',  //总页数
                page:1,  //页数
                        pagetType:0,
                        num:1,
            }
        },
		mounted(){
            this.initialize();  //获取商品详情
            this.catelist();  //商品分类
        },
		methods:{
			//左上角返回键
			onClickLeft () { this.$router.push('/mall');},
			//获取商品详情
			initialize(id){
                var _this = this;
				  this.Tools.AXIOS({
                    url: 'product/cloud',
					transformRequest:{
                        cate_id: id || 0,
                        page: this.page || 1,
					},
                    success: function (res) {
                        let result = res.data.data
                        _this.pageSize = result.pageSize;
                        _this.pageNum = result.pageNum;
                        _this.listAll.push(...result.list);
                    }
                })
            },
            //商品分类列表
            catelist(){
				var _this = this;
				this.Tools.AXIOS({
                    url: 'product/catelist',
                    success: function (res) {
                        let result = res.data.data
                        _this.categoryList = res.data.data;
                    }
                })
            },
            //分页加载
            onLoad() {
                if(this.page < this.pageNum){
                    this.page++;
                    this.initialize();
                }
            },
            selectType(id,cate_id){
                this.listAll = [];   //清空
                this.page = 1;
                id == -1 ? (this.currentType = -1,this.initialize(0)):(this.currentType = id,this.initialize(cate_id));
            },
            //搜索
            searchIn(){
                this.$router.push({path:'search'});
            }
        },
		components: {
            tabbar,
            Search,
            Swipe,
            SwipeItem,
            HeadTitle,
            [Tag.name]: Tag
		},
    }
</script>
<style scoped>
    ::-webkit-scrollbar { display: none;}
    .wrap{ background: #fff;}
    .tps{ width: 100%; position: fixed; top: 1.24rem; background: #fff;z-index: 999;}
    .search{ width: 100%; background: #fff; margin: 2% 0;}
    .types-header, .panel-header { display: flex;flex-wrap: nowrap; overflow: auto; -webkit-overflow-scrolling: touch;}
    .header-wrap-inner { width: 90%;  margin-left: 5%;}
    .header-wrap{ overflow: hidden; padding: .4rem 0; border-bottom: 0px solid #F1F1F1; box-shadow: 0 0 5px #EDEDED;}
    .type-item { font-size: .32rem; flex-shrink: 0; margin: 0 .5rem; color: #666;}
    .type-item:nth-of-type(1){ margin-left: 0; padding-bottom: .1rem;}
    .type-item.selected { border-bottom: 2px solid #FD9709; color: #FD9709; font-weight: bold; }
    .types-list { background-color: #fff; font-size: 14px; color: #333333;display: flex; flex-wrap: wrap;}
    .types-list > .list-item:nth-child(4n) {border-right: none;}
    .list-item.selected { font-weight: bold; color: #63c470; border-bottom: 2px solid #63c470;}
    .loadmore{ padding: 1.5rem 0; }

    .i-home .shoplist{ width: 100%; margin: 2.5rem 0 0 0; border-bottom: 1px solid #F4F4F4;}
    .i-home .shoplist:last-child{ margin-bottom: 1.5rem; padding-bottom: .3rem;  border-bottom:none;}
    .i-home .shoplist .heade{ width: 95%; line-height: .2rem; padding: 1rem 0 0; margin: 0 auto; overflow: hidden;}
    .i-home .shoplist .heade span:nth-child(1){ font-size: 1.4rem; color: #000; }
    .i-home .shoplist .heade span:nth-child(2){ width: 2.5rem;}
    .i-home .shoplist .heade span img{ width: 100%; }
    .i-home .shoplist ul{ overflow: hidden; }
    .i-home .shoplist ul li{ width: 100%; display: flex; background: #fff; position: relative; padding: .3rem 0; border-bottom: 1px solid #F3F3F3; box-sizing: border-box;}
    .i-home .shoplist ul li span{ width: 30%; height: 2.5rem; overflow: hidden; display: inline-block; margin-left: .1rem;}
    .i-home .shoplist ul li span img{ width: 100%;}
    .i-home .shoplist ul li .prter{ width: 55%; display: inline-block;}
    .i-home .shoplist ul li .prter p{ width: 50%; padding: 0 .2rem; font-size: .35rem; display: block; color: #323232; border: 0; text-align: left;}
    .i-home .shoplist ul li .prter p:nth-of-type(1){ margin-bottom: .1rem; width: 90%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
    .i-home .shoplist ul li .prter label{ font-size: .35rem; color: #FD9709; font-style: normal; margin-top: .4rem; display: block;}
    .i-home .shoplist ul li .prter label i{ font-style: normal; padding: 0 .2rem;}
    .i-home .shoplist p{ color: #ccc; padding: .35rem 0; text-align: center; border-top: 1px solid #F3F3F3;}

    .i-home .shoplist .tips{ position: absolute; right: .3rem; bottom: .3rem;  height: .6rem; border: 1px solid #ac956c; border-radius: 3px;}
    .i-home .shoplist .delete{ position: absolute; right: .3rem; top: .4rem; color: #d6d6d6;}
    .i-home .shoplist .tips label{ text-align: center; height: .6rem; line-height: .6rem;}
    .i-home .shoplist .tips label:nth-of-type(1){ border-right: 1px solid #ac956c;}
    .i-home .shoplist .tips label:nth-of-type(2){ border-left: 1px solid #ac956c;}
    .i-home .shoplist .tips label i{ padding:0 .2rem; color: #ac956c; }
    .i-home .shoplist .tips input{ margin: 0 .4rem; background:none; font-size: .36rem; line-height: .6rem;}
    .i-home .shoplist .tips span{ margin: 0 .4rem; background:none; font-size: .36rem; display:initial; line-height: .6rem;}
    .van-checkbox{ margin-left: .2rem;}
    .checkbox_ic{ position: absolute; left: .1rem; top:1.3rem; display: flex;}
    .checkbox_ic i{ color: #ABABAB; font-size: .32rem; font-style: normal; margin: 0.05rem .1rem 0; display: block;}
    .fa-check-circle{ color: #06BF04!important;}
    .item-check-btn { display: inline-block; width: .5rem; height: .5rem; border: 1px solid #ccc; border-radius: 50%; text-align: center;  vertical-align: middle;}
    .check { border-color: #06BF04; color: #fff; background:#06BF04 url(./../../assets/img/gl.png) .1rem center no-repeat;}
    .allOrder{ width: 100%; position: fixed;  bottom: 50px; left: 0; border-top: 1px solid #E5E5E5; background-color: #fff;}
    .allOrder p{ font-size: .35rem; color: #666; margin: .44rem 2rem 0;}
    .allOrder p label{ font-size: .35rem; color: #ea8800; }
    .allOrder .checkbox_ic{ position: absolute; left: .2rem; top:.4rem;}
    .sumbOrder{ width: 30%; text-align: center; color: #fff; font-size: .35rem; background-color: #ea8800; padding: .4rem 0;}
    .tsd{ font-size: .35rem; color: #666; text-align: center; padding: .5rem 0;}
    .xj{ width: 50%; position: absolute ; right: 6%; top: 10%;}
    .xj img{ width: 100%;}

    .m_nav{ width: 100%; overflow: hidden; background: #fff; padding: .2rem 0 .5rem;}
    .m_nav li{ width: 25%; float: left; margin: .5rem 0 .2rem;}
    .m_nav li span{ width: 1rem; height: 1rem; display: block; text-align: center; background: #000; border-radius: 100px; margin: 0 auto;}
    .m_nav li span i{ color: #fff; line-height: 1.1rem;}
    .m_nav li p{ text-align: center; margin-top: .2rem; font-size: .3rem;}
    .m_nav li:nth-of-type(1) span{ background: #FBADAB;}
    .m_nav li:nth-of-type(2) span{ background: #7FD3F7;}
    .m_nav li:nth-of-type(3) span{ background: #9A5E5D;}
    .m_nav li:nth-of-type(4) span{ background: #61DC9D;}
    .m_nav li:nth-of-type(5) span{ background: #C3A251;}
    .m_nav li:nth-of-type(6) span{ background: #ECC075;}
    .m_nav li:nth-of-type(7) span{ background: #CCA8D7;}
    .m_nav li:nth-of-type(8) span{ background: #8A6FAB;}
</style>
